<template>
	<!-- uni-app 生命周期 -->
	<view class="">
		姓名：{{name}} - {{age}}
		<view ref="scroll"></view>
		<navigator url="/pages/demo4-defineExpose/demo4-defineExpose">跳转demo4</navigator>
		<hr />
		<view>计数：{{count}}</view>
		<hr />
		<navigator open-type="reLaunch" url="/pages/demo3-life/demo3-life"> 当前页面销毁，跳到demo3页面</navigator>
		<hr />
		<view v-for="item in 50">{{item}}</view>
				
		<view class="fixed" v-if="fixed">↑</view>
	</view>
</template>


<script setup>
	 // 推荐这个：执行顺序 onLoad, onShow, onReady (App.vue 里的生命周期最先)
	 // 有组件时， 用 vue 生命周期时执行顺序 onLoad, onShow, onBeforeMount, onReady, onMounted
import { ref, onBeforeMount,onMounted } from "vue"
import {onLoad,onShow,onHide,onReady,onUnload,onPageScroll} from "@dcloudio/uni-app"

const name = ref("张三")
const age = ref(18)
const scroll = ref(null)

const count = ref(0)
let time= setInterval(()=>{
	count.value++
},50)
const fixed = ref(false);

// onLoad 接受上个页面传入的参数。在该页面只执行一次。
onLoad((e)=>{	
	console.log("onload函数", scroll.value);	
	console.log(e);
	name.value = e.name
	age.value = e.age
})
// onShow 页面展示时执行
onShow(()=>{
	console.log("onShow函数", scroll.value);
	time= setInterval(()=>{
		count.value++
	},50)
})
// 切换页面时执行
onHide(()=>{
	console.log("onHide函数", scroll.value);
	clearInterval(time)
})

onBeforeMount(()=>{
	console.log("onBeforeMount函数 - vue3");
})

// onReady（unapp） 和 onMounted（vue3） 功能一样
onReady((e)=>{	
	console.log("onReady函数", scroll.value);
})
// dom 挂载后执行
onMounted(()=>{
	console.log("onMounted函数 - vue3", scroll.value);
})

// 跳转方式为 reLaunch 时，卸载当前页面。
onUnload(()=>{
	console.log("onUnload卸载页面");
})

onPageScroll((e)=>{
	console.log(e.scrollTop);	
	fixed.value = e.scrollTop>200
	
})
</script>


<style lang="scss" scoped>
	.fixed{
		width: 100px;
		height: 100px;
		background: orange;
		position: fixed;
		right:30px;
		bottom:30px;
	}
</style>
